<template>
	<view class="Home">
		<!-- @getphonenumber="getphonenumber" -->

		<div class="homeAct">
			<image src="https://wx.sjcmhz.com/static/image/act.png" mode=""></image>
		</div>
		<div class="homeText">
			欢迎使用苏江之家
			<!-- {{newAvatar}} -->
		</div>
		<view class='input'><input type='nickname' name='nickname' maxlength="15"  v-model="nickName" placeholder="请输入昵称"></input>
		</view>
		<view class="SWI_home_btn SWI_home_btn_act" v-if="!newAvatar && nickName !=''">




			<button class="button" type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">

				获取头像
			</button>


			</div>
		</view>
		<!-- 
		<button class="button" type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
			<image class="user_img" :src="homeDetail.avatar_url"></image>
		</button> -->

		<view class="SWI_home_btn" v-if="newAvatar">
			<button open-type="getPhoneNumber" @getphonenumber="getphonenumber">获取手机号</button>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				newAvatar: '',
				nickName: ''
			}
		},
		onShow() {
			// uni.getUserProfile()
		},
		methods: {
			// 一键登陆
			getphonenumber(e) {
				let that = this
				uni.login({
					provider: 'weixin',
					success: ret => {
						that.$request(that.$Api.indexLogin, {
							'code': ret.code,
							"encryptedData": e.detail.encryptedData,
							"iv": e.detail.iv,
							'rawData': '1',
							'signature': '1',
						}, "POST").then(res => {
							console.log("1111", res.data)
							if (res.data.code == 0) {
								uni.setStorageSync('phone', res.data.data.mobile)
								// 0游客 1主播 2行政管理员 3审核员 4组长 5楼长 6服务员 7教师
								uni.setStorageSync('userStatus', res.data.data.status)
								if (res.data.data.status == 0 || res.data.data.status == 1) {
									uni.switchTab({
										url: '/pages/index/index'
									})
								} else {
									uni.navigateTo({
										url: '/pagesA/index/index'
									})

								}

							}

						})

					}
				})
				console.log('113', e)
			},
			async senUserInfo() {
				const {
					data
				} = await this.$request(this.$Api.userSaves, {
					nickname: this.nickName,
					avatar_url: this.newAvatar
				}, "POST")
			},
			onChooseavatar(e) {

				console.log('eeee', e)
				// this.newAvatar = e.detail.avatarUrl
				this.UpList(0, [e.detail.avatarUrl])
				// this.senUserInfo()
				// this.imgtofile(e.detail.avatarUrl, 0)
			},

			//图片链接转二进制 并上传图片到服务器
			imgtofile(src, canvasId) {
				console.log('111', src);
				let canvas = [];
				let that = this
				//使用canvas进行修改图片类型,比如jpeg转png,不需要可以去掉
				canvas = uni.createCanvasContext(canvasId);
				const fileSystemManager = uni.getFileSystemManager();
				return new Promise((resolve, reject) => {
					//获取文件类型
					uni.getImageInfo({
						src: src,
						success: (res) => {
							const imgWidth = res.width;
							const imgHeight = res.height;
							canvas.width = res.width;
							canvas.height = res.height;
							let avatername = res;
							console.log('222', res);
							//将图片画到cavas上
							canvas.drawImage(res.path, 0, 0, imgWidth, imgHeight);
							canvas.draw(
								setTimeout(() => {
									//将canvas上的图片转为地址并设置图片类型
									uni.canvasToTempFilePath({
										canvasId: canvasId,
										fileType: 'png',
										width: imgWidth,
										height: imgHeight,
										success: function(res) {
											console.log(res.tempFilePath);
											//将图片转为文件流
											fileSystemManager.readFile({
												filePath: res
													.tempFilePath, // 图片临时路径
												success: (data) => {
													console.log(res,
														11111111);

													let file = data
														.data;

													that.UpList(0,
														file)
												},
												fail: (err) => {
													console.log(
														'读取文件失败',
														err);
												}
											});
										},
										fail(res) {
											console.log(res);
										}
									});
								}, 500)
							);
						}
					});
				});
			},

			UpList(index, file) {
				var that = this
				console.log("resssssss111", index, file)
				that.$utils.UpdataImg(file, (res) => {
					console.log("resssssss", res)
					that.newAvatar = res
					that.senUserInfo()
				})
			},
		}
	}
</script>
<style lang="less">
	// 获取到用户手机号
	.input {
		margin: 0 auto;
		margin-top: 80rpx;
		border: 1rpx solid #999;
		color: #000;
		width: 635rpx;
		height: 92rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		border-radius: 16rpx;

		input {
			width: 100%;
			height: 100%;
			line-height: 88rpx;
			font-size: 28rpx;
			text-align: left;
		}
	}

	.SWI_home_btn {
		width: 635rpx;
		height: 92rpx;
		border-radius: 16rpx;
		box-sizing: border-box;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
		background: #9013FE;
		line-height: 92rpx;
		margin: 148rpx auto 0 auto;
		// position: fixed;
		// left: 58rpx;
		// bottom: 45%;
		margin-top: 46rpx;
		display: flex;
		align-items: center;
		z-index: 9999;
		position: relative;



		button {
			width: 100%;
			height: 100%;
			background: none;
			position: absolute;
			left: 0;
			top: 0;
			padding: 0 !important;
			font-size: 32rpx;
			color: #fff;
			line-height: 92rpx;

		}
	}

	.homeAct {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 50%;

		image {
			width: 280rpx;
			height: 280rpx;
		}
	}

	.homeText {
		width: 100%;
		font-size: 32rpx;
		line-height: 80rpx;
		text-align: center;
		font-weight: 500;
	}

	.SWI_home_btn_act {
		margin: 40rpx auto 0 auto;
	}
</style>